<template>
  <div id="app">
    <!-- <ctp-router>
      <router-view v-document-title="$route.meta.title"></router-view>
    </ctp-router> -->

    <el-container class="index-con">
      <el-aside width="150px">
        <leftnav></leftnav>
      </el-aside>
      <el-container class="main-con">
        <!-- <el-header height="40px" class="index-header">

        </el-header> -->
        <el-main class="index-main">
          <transition name="fade">
             <router-view v-document-title="$route.meta.title"></router-view>
          </transition>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { signature } from "@/utils/signature";
import leftnav from "@/pages/common/leftnav.vue";
export default {
  name: "App",
  // 注册组件
  components: {
    leftnav,
  },
  created() {
    signature();
  },
};
</script>

<style lang='less'>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #2c3e50;
  background: #F6F6F7;

  height: 98vh;
  margin: 0;
  padding: 0;
}
.index-header {
  background-color: #F6F6F7!important;
}
.index-main {
  height: 98vh;
}

.fade-enter-active,.fade-leave-active {
  transition: opacity 0.3s, transform 0.3s; /* 同时对 opacity 和 transform 进行过渡 */
  transition: opacity 0.3s, transform 0.3s;
}

.fade-enter,.fade-leave-to {
  opacity: 0;
  transform: translateY(20px); /* 添加一个垂直位移，使元素从下方滑入 */
  transform: translateY(20px);
}
</style>
